<template>
	<div id="city-box">
		<div class="ct-shou-box">
			<input type="text" />
		</div>
		<div class="remenct-box">
			<p>热门城市</p>
			<div class="rm-city">
				<span v-for="(item,key) in cityList8" >{{item.city_name2}}</span>
				<!--<span></span>
				<span>广州</span>
				<span>深圳</span>
				<span>杭州</span>
				<span>苏州</span>
				<span>温州</span>
				<span>南京</span>-->
			</div>
		</div>
		<div class="aside-r">
			<span v-for="(val,key) in cityL2" :key='key' >{{val}}</span>
			<!--<span>B</span>
			<span>C</span>
			<span>D</span>
			<span>E</span>
			<span>F</span>
			<span>G</span>
			<span>I</span>
			<span>J</span>
			<span>K</span>
			<span>L</span>
			<span>M</span>
			<span>N</span>-->
		</div>
	
		<div class="shouyincity">
			<div  v-for="(val,key) in guiLeiList" :key='key' class="dv-p">
				<p>{{cityL2[key]}}</p>
				<div  v-for="(v,k) in val" :key='k' class="dv-span">
					<span>{{v.city_name2}}</span>
					<!--<span>安徽</span>
					<span>安阳</span>-->
				</div>
			</div>
		</div>	
	
		<everyfooter></everyfooter>
	</div>
</template>

<script>
	import everyfooter from '../components/everyfooter'
	export default{
		name: 'city',
		components: {
			everyfooter
		},
		data(){
			return {
				msg: '111',
				cityList8: [],
				cityL2: [],
				guiLeiList:''
			}
		},
		created(){
			this.axios.get('/guoneihotel.json')
			.then(res => {
				var citylist = res.data.data
				var cityID = []
				
				for (var i=0;i<citylist.length;i++) {
					cityID[cityID.length] = citylist[i].id
				}
				cityID.sort((a,b) => {return a-b})    //对城市id从新排序，为了下面拿前八id城市渲染到页面表示热门城市
				var cityNewID = []
				var cityNewList = []
				for (var j=0;j<8;j++) {
					cityNewID[cityNewID.length] = cityID[j]
					//				console.log(cityNewID)        成功拿到id前八的城市的id
					for (var a=0;a<citylist.length;a++) {
						if(cityNewID[j] === citylist[a].id){
							cityNewList[j] =citylist[a]
						}
					}
				}
//				console.log(cityNewList)   // 成功拿到前八id对应的城市
				this.cityList8 = cityNewList
				
//				拿手指拇开始
				var cityFirstLe = []
				for (var i=0;i<citylist.length;i++) {
					cityFirstLe[cityFirstLe.length] = citylist[i].city_name1.substring(0,1).toUpperCase()
				}
//				alert(cityFirstLe)   //有字母重复，去重复
				
				function outRepeate(arr){
					var cityL = []
					for (var i=0;i<arr.length;i++) {
						if(cityL.indexOf(arr[i]) == -1){
							cityL.push(arr[i])
						}
					}
					return  cityL
				}
				
				var cityL2 = outRepeate(cityFirstLe)
				cityL2.sort()
//				console.log(cityL2)
				this.cityL2 =cityL2          //成功将城市首字母渲染到页面
				
				var arr = new Array()
				for (var i=0;i<cityL2.length;i++) {
					arr[i] = new Array()              //都说new会影响性能，但是没想到更好定义动态二位数组的方法了
					for (var j=0;j<citylist.length;j++) {
						var szm = citylist[j].city_name1.substring(0,1).toUpperCase()
						if(cityL2[i] == szm){
							arr[i].push(citylist[j])
						}
					}
				}
//				console.log(arr[5][0])     //成功分类，可以保持然后页面渲染了
				this.guiLeiList = arr

			})
		},
		
	}

</script>

<style>
	.ct-shou-box{width: 100%;height: 40px;text-align: center;margin-top: 5px;position: relative;}
	.ct-shou-box input{width: 80%;height: 30px;border: 1px solid blue;opacity: 0.4;border-radius: 15px;}

	.remenct-box{width: 100%;height: 200px;background: #D7D7E2;overflow: hidden;}
	.remenct-box p{height: 30px;font-size: 14px;background: #F3F3F3;margin-top: 25px;line-height: 30px;padding-left: 10px;}

	.rm-city{width: 100%;height: 145px ;display: flex;flex-wrap: wrap;align-items: center;}
	.rm-city span{display: block;width: 115px;height: 30px;line-height: 30px;text-align: center;}
	
	.aside-r{width: 20px;background: #F3F3F3;position: fixed;right: 0;top: 45px;}
	.aside-r span{display: block;font-size: 20px;}
	
	.shouyincity{width: 100%;}
	.dv-p p{height: 30px;font-size: 14px;background: #F3F3F3;line-height: 30px;padding-left: 10px;}
	.dv-span{width: 100%;padding-left: 25px;background: #D7D7E2;}
	.dv-span span{display: block;height: 30px;line-height: 30px;}
</style>